<template>
	<view class="investment-container page-container">

		<!-- 招商横幅 -->
		<view class="banner-section">
			<image :src="$tools.buildUrl('/static/images/coop-banner.jpg')" mode="widthFix" class="banner-image">
			</image>
			<view class="banner-overlay">
				<text class="banner-title">六堡茶招商加盟</text>
				<text class="banner-subtitle">传承千年茶文化，共创财富新未来</text>
			</view>
		</view>

		<!-- 品牌优势 -->
		<view class="advantage-section">
			<view class="section-title">
				<text class="title-text">品牌优势</text>
			</view>
			<view class="advantage-grid">
				<view class="advantage-item" v-for="(item, index) in advantages" :key="index">
					<view class="advantage-icon">
						<u-icon :name="item.icon" size="32" color="#1c705e"></u-icon>
					</view>
					<text class="advantage-title">{{ item.title }}</text>
					<text class="advantage-desc">{{ item.desc }}</text>
				</view>
			</view>
		</view>

		<!-- 加盟政策 -->
		<view class="policy-section">
			<view class="section-title">
				<text class="title-text">加盟政策</text>
			</view>
			<view class="policy-list">
				<view class="policy-item" v-for="(item, index) in policies" :key="index">
					<view class="policy-number">{{ index + 1 }}</view>
					<view class="policy-content">
						<text class="policy-title">{{ item.title }}</text>
						<text class="policy-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加盟条件 -->
		<view class="condition-section">
			<view class="section-title">
				<text class="title-text">加盟条件</text>
			</view>
			<view class="condition-list">
				<view class="condition-item" v-for="(item, index) in conditions" :key="index">
					<u-icon name="checkmark" size="20" color="#1c705e"></u-icon>
					<text class="condition-text">{{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 投资费用 -->
		<view class="cost-section">
			<view class="section-title">
				<text class="title-text">投资费用</text>
			</view>
			<view class="cost-table">
				<view class="cost-row cost-header">
					<text class="cost-cell">加盟类型</text>
					<text class="cost-cell">投资金额</text>
					<text class="cost-cell">店铺面积</text>
				</view>
				<view class="cost-row" v-for="(item, index) in costData" :key="index">
					<text class="cost-cell">{{ item.type }}</text>
					<text class="cost-cell cost-price">{{ item.cost }}</text>
					<text class="cost-cell">{{ item.area }}</text>
				</view>
			</view>
		</view>

		<!-- 加盟流程 -->
		<view class="process-section">
			<view class="section-title">
				<text class="title-text">加盟流程</text>
			</view>
			<view class="process-list">
				<view class="process-item" v-for="(item, index) in processes" :key="index">
					<view class="process-step">
						<text class="step-number">{{ index + 1 }}</text>
					</view>
					<view class="process-content">
						<text class="process-title">{{ item.title }}</text>
						<text class="process-desc">{{ item.desc }}</text>
					</view>
					<view class="process-line" v-if="index < processes.length - 1"></view>
				</view>
			</view>
		</view>

		<!-- 联系我们 -->
		<view class="contact-section">
			<view class="section-title">
				<text class="title-text">联系我们</text>
			</view>
			<view class="contact-info">
				<view class="contact-item">
					<u-icon name="phone" size="20" color="#1c705e"></u-icon>
					<text class="contact-text">招商热线：400-888-6789</text>
				</view>
				<view class="contact-item">
					<u-icon name="weixin" size="20" color="#1c705e"></u-icon>
					<text class="contact-text">微信咨询：liubao_investment</text>
				</view>
				<view class="contact-item">
					<u-icon name="email" size="20" color="#1c705e"></u-icon>
					<text class="contact-text">邮箱：investment@liubao.com</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="action-btn secondary" @click="makeCall">电话咨询</button>
			<button class="action-btn primary" @click="applyJoin">立即加盟</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 品牌优势
				advantages: [{
						icon: 'star',
						title: '品牌实力',
						desc: '千年茶文化传承，知名品牌保障'
					},
					{
						icon: 'gift',
						title: '产品优势',
						desc: '优质茶源，多样化产品线'
					},
					{
						icon: 'setting',
						title: '技术支持',
						desc: '专业培训，全程技术指导'
					},
					{
						icon: 'heart',
						title: '服务保障',
						desc: '完善售后，贴心服务支持'
					}
				],
				// 加盟政策
				policies: [{
						title: '品牌授权',
						desc: '免费提供品牌使用权，统一VI形象设计'
					},
					{
						title: '产品供应',
						desc: '厂家直供，保证正品，价格优势明显'
					},
					{
						title: '营销支持',
						desc: '提供营销方案，广告物料，促销活动支持'
					},
					{
						title: '培训指导',
						desc: '免费培训，包括产品知识、销售技巧等'
					},
					{
						title: '区域保护',
						desc: '严格区域保护政策，避免恶性竞争'
					}
				],
				// 加盟条件
				conditions: [
					'认同六堡茶品牌文化和经营理念',
					'具备一定的经济实力和投资能力',
					'有合适的经营场所和店铺位置',
					'具备一定的市场营销和管理能力',
					'愿意接受总部的统一管理和培训',
					'有长期合作的意愿和决心'
				],
				// 投资费用
				costData: [{
						type: '旗舰店',
						cost: '30-50万',
						area: '200㎡以上'
					},
					{
						type: '标准店',
						cost: '15-30万',
						area: '100-200㎡'
					},
					{
						type: '精品店',
						cost: '8-15万',
						area: '50-100㎡'
					},
					{
						type: '迷你店',
						cost: '3-8万',
						area: '20-50㎡'
					}
				],
				// 加盟流程
				processes: [{
						title: '咨询了解',
						desc: '电话或微信咨询，了解加盟政策'
					},
					{
						title: '实地考察',
						desc: '到总部或样板店实地考察'
					},
					{
						title: '签订合同',
						desc: '签订加盟合同，缴纳相关费用'
					},
					{
						title: '店铺装修',
						desc: '按照统一标准进行店铺装修'
					},
					{
						title: '培训指导',
						desc: '参加总部培训，学习经营管理'
					},
					{
						title: '开业运营',
						desc: '正式开业，总部提供持续支持'
					}
				]
			}
		},
		methods: {
			// 拨打电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '400-888-6789'
				})
			},

			// 申请加盟
			applyJoin() {
				uni.showModal({
					title: '申请加盟',
					content: '请拨打招商热线400-888-6789或添加微信liubao_investment进行详细咨询',
					confirmText: '立即拨打',
					success: (res) => {
						if (res.confirm) {
							this.makeCall()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.investment-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.banner-section {
		position: relative;
		margin-bottom: 20rpx;
	}

	.banner-image {
		width: 100%;
		height: 400rpx;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), transparent);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 60rpx;
	}

	.banner-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.banner-subtitle {
		font-size: 28rpx;
		color: #ffffff;
		opacity: 0.9;
	}

	.advantage-section,
	.policy-section,
	.condition-section,
	.cost-section,
	.process-section,
	.contact-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.section-title {
		margin-bottom: 40rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.advantage-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.advantage-item {
		width: 48%;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.advantage-icon {
		margin-bottom: 20rpx;
	}

	.advantage-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.advantage-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.policy-list {
		margin-top: 20rpx;
	}

	.policy-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.policy-number {
		width: 60rpx;
		height: 60rpx;
		background-color: #1c705e;
		color: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.policy-content {
		flex: 1;
	}

	.policy-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.policy-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.condition-list {
		margin-top: 20rpx;
	}

	.condition-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.condition-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 16rpx;
	}

	.cost-table {
		margin-top: 20rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.cost-row {
		display: flex;
	}

	.cost-header {
		background-color: #f5f5f5;
	}

	.cost-cell {
		flex: 1;
		padding: 24rpx;
		text-align: center;
		font-size: 26rpx;
		border-right: 2rpx solid #e5e5e5;
		border-bottom: 2rpx solid #e5e5e5;
	}

	.cost-cell:last-child {
		border-right: none;
	}

	.cost-row:last-child .cost-cell {
		border-bottom: none;
	}

	.cost-header .cost-cell {
		font-weight: bold;
		color: #333;
	}

	.cost-price {
		color: #1c705e;
		font-weight: bold;
	}

	.process-list {
		margin-top: 20rpx;
	}

	.process-item {
		position: relative;
		display: flex;
		margin-bottom: 40rpx;
	}

	.process-step {
		width: 80rpx;
		height: 80rpx;
		background-color: #1c705e;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.step-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.process-content {
		flex: 1;
		padding-top: 10rpx;
	}

	.process-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.process-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.process-line {
		position: absolute;
		left: 40rpx;
		top: 80rpx;
		width: 4rpx;
		height: 40rpx;
		background-color: #e5e5e5;
	}

	.contact-info {
		margin-top: 20rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.contact-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 16rpx;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 2rpx solid #e5e5e5;
		padding: 30rpx;
		display: flex;
	}

	.action-btn {
		flex: 1;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
	}

	.action-btn.primary {
		background-color: #1c705e;
		color: #ffffff;
	}

	.action-btn.secondary {
		background-color: transparent;
		color: #1c705e;
		border: 2rpx solid #1c705e;
	}
</style>